

<template>
  <div class="page-wrap">
    <div class="page-wrap-content pt-24">
      <pkcard>
        <div class="flex-column mt-24 align-items-center justify-center">
          <div>
            <el-upload
            ref="uploadRef"
            class="upload-demo"
            action="https://api.bytesbay.cn/bole/attachment/uploadAsync"
            :auto-upload="true"
            name="filename"
            accept=".jpg, .jpeg, .png, .webp, .pdf"
            :headers="updataParam"
            :show-file-list="false"
            :on-success="onSuccess"
            :on-progress="onProgress"
            :on-error="onError"
            :before-upload="beforeupload"
          >
            <template #trigger>
              <el-icon size="45" color="#777"><UploadFilled /></el-icon>
            </template>
          </el-upload>
          </div>
          <div class="f-12">上传简历，只支持jpg, jpeg, png, webp, pdf文件格式</div>
        </div>
      </pkcard>
      <div class="mt-12">
        <pkcard>
          <file-list ref="fileListdata" />
        </pkcard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, reactive  } from 'vue'
  import { UploadFilled } from '@element-plus/icons-vue'
  import pkHeader from '@/components/header/header.vue'
  import pkcard from '@/components/pkui/pkcard/pkcard.vue'
  import { ElMessage } from 'element-plus'
  import { getToken, setKeyItem, getKeyUserInfo} from '@/utils/auth'
  import fileList from './component/filelist.vue'
  const resumePath = ref("")
  const fileListdata = ref(null)
  const loading = ref(false)
  const updataParam = reactive({
    Token: ""
  })
  const onSuccess = (e) => {
    if(e.code == 1000) {
      // resumePath.value = e.data
      fileListdata.value.getList()
    } else {
      ElMessage(
        {
          showClose: true,
          message: e.msg,
          type: 'warning',
        }
      )
    } 
    loading.value = false
  }

  const beforeupload = () => {

  }


  const onProgress = (e) => {
    console.log('------------------', e)
    loading.value = true
  }

  const onError = () => {
    loading.value = false
  }

  const viewPDF = () => {
    window.open(resumePath.value, '_blank')
  }

  onMounted(() => {
    updataParam.Token = getToken()
    const userData =  getKeyUserInfo() ? JSON.parse(getKeyUserInfo()) : {}
    if (getToken()) {
      resumePath.value  = userData.attachment
    }
  })
</script>
<style lang="scss" scoped>
  .page-wrap{
    &-menu{
      background: #fff;
    }
    &-content{
      margin: 0 auto;
      min-height: 100%;
      margin-bottom: 100px;
      padding: 16px;
    }
    &-item{
      width: 273px;
      margin-right: 12px;
      margin-bottom: 12px;
    }
    &-item:nth-child(4n){
      margin-right: 0px!important;
    }
    &-itembox{
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    &-resumeimg{
      min-height: 400px;
      padding-bottom: 40px;
    }
   
  }
</style>
